import React from 'react';
import { Card, Radio } from 'antd';
import { Column } from '@ant-design/charts';
import type { RadioChangeEvent } from 'antd';
import type { DashboardData } from '@/api/dashboard';

interface GrowthChartProps {
  data: DashboardData;
}

interface ChartDataItem {
  type: string;
  category: string;
  value: number;
}

const GrowthChart: React.FC<GrowthChartProps> = ({ data }) => {
  const [timeRange, setTimeRange] = React.useState<'week' | 'month'>('week');

  const handleTimeRangeChange = (e: RadioChangeEvent) => {
    setTimeRange(e.target.value);
  };

  const chartData = React.useMemo((): ChartDataItem[] => {
    if (timeRange === 'week') {
      return [
        { type: '用户', category: '本周新增', value: data.newUsersThisWeek },
        { type: '文章', category: '本周新增', value: data.newArticlesThisWeek },
        { type: '访问', category: '本周访问', value: data.viewsThisWeek },
        { type: '点赞', category: '本周点赞', value: data.likesThisWeek },
        { type: '评论', category: '本周评论', value: data.commentsThisWeek },
      ];
    } else {
      return [
        { type: '用户', category: '本月新增', value: data.newUsersThisMonth },
        { type: '文章', category: '本月新增', value: data.newArticlesThisMonth },
        { type: '访问', category: '本月访问', value: data.viewsThisMonth },
        { type: '点赞', category: '本月点赞', value: data.likesThisMonth },
        { type: '评论', category: '本月评论', value: data.commentsThisMonth },
      ];
    }
  }, [data, timeRange]);

  return (
    <Card
      title="增长对比"
      extra={
        <Radio.Group
          value={timeRange}
          onChange={handleTimeRangeChange}
          optionType="button"
          buttonStyle="solid"
          size="small"
        >
          <Radio.Button value="week">本周</Radio.Button>
          <Radio.Button value="month">本月</Radio.Button>
        </Radio.Group>
      }
    >
      <Column
        data={chartData}
        xField="type"
        yField="value"
        seriesField="category"
        isGroup={true}
        columnStyle={{
          radius: [4, 4, 0, 0],
        }}
        label={{
          position: 'top',
        }}
        tooltip={{
          formatter: (datum: ChartDataItem) => {
            return {
              name: datum.category,
              value: datum.value,
            };
          },
        }}
        animation={{
          appear: {
            animation: 'fade-in',
            duration: 1000,
          },
        }}
      />
    </Card>
  );
};

export default GrowthChart; 